<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Yungyu Game</title>
    <style>
        body{
            background: url('./img/title/bg.jpg');
            background-size: cover;
        }
        a {
            text-decoration: none;
        }
        h1{
            text-align: center;
        }
        .games {
            text-align: center;
        }
        .pane{
            display: inline-block;
            /* width: 200px; */
            /* height: 240px; */
            box-shadow: 0px 0px 5px 2px #9c6966;
            /* padding: 2px; */
            /* border-radius: 5px; */
            margin: 30px;
            /* background: bisque; */
        }
        .pane:hover {
            box-shadow: 0px 0px 15px 5px #9c6966;
        }
        .pane::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            position: absolute;
            background: radial-gradient(#904a53, #c57c69, #f39573);
            border-radius: 50%;
            margin: 5px;
        }
        .pane::after {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            position: absolute;
            transform: translateX(-25px);
            background: radial-gradient(#904a53, #c57c69, #f39573);
            border-radius: 50%;
            margin: 5px;
        }
        .pane>img{
            width: 200px;
            height: 200px;
        }
        .pane > .title{
            text-align: center;
            line-height: 36px;
            display: none;
        }
    </style>
</head>
<body style="padding: 10px">
    <h1>Yungyu Game</h1>
	<div class="games">
		<a class="pane" href="./2048.html">
            <img src="./img/title/2048.jpg">
            <div class="title">
                <span>2048</span>
            </div>
        </a>
		<a class="pane" href="./拼图.html">
            <img src="./img/title/splitimg.jpg">
            <div class="title">
                <span>拼图</span>
            </div>
        </a>
		<a class="pane" href="./五子棋.html">
            <img src="./img/title/five.jpg">
            <div class="title">
                <span>五子棋</span>
            </div>
        </a>
		<a class="pane" href="./PushBox/index.html">
            <img src="./img/title/pushbox.jpg">
            <div class="title">
                <span>推箱子</span>
            </div>
        </a>
		<a class="pane" href="./TenPo/index.html">
            <img src="./img/title/ten.jpg">
            <div class="title">
                <span>十消</span>
            </div>
        </a>
		<a class="pane" href="./simpleCar/index.html">
            <img src="./img/title/car.jpeg">
            <div class="title">
                <span>赛车</span>
            </div>
        </a>
		<a class="pane" href="./贪吃蛇.html">
            <img src="./img/title/snake.png">
            <div class="title">
                <span>贪吃蛇</span>
            </div>
        </a>
    </div>
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(()=>{
    rotate()
});

function rotate () {
    let arr = document.getElementsByClassName('pane')
    for (var i = 0; i < arr.length; i++) {
        arr.item(i).style.transform=`rotate(${Math.random()*45 - 22.5}deg)`
    }
}
</script>
</body>
</html>